<template>
  <div class="full">
    <div class="container">
      <div class="fixedBg"></div>
      <!-- 主要动态内容 已登录 -->
      <div class="homeContainer">
        <!-- 左 -->
        <div class="leftPanel">
          <div class="userWrapper">
            <div class="userWrapperLeft">
              <!-- 用户中心 -->
              <div class="content">
                <div class="userPic"></div>
                <router-link
                  class="userName"
                  :to="{
                    name: 'Personal',
                    query: { hostMid: UserStore.mid },
                  }"
                >
                  {{ UserStore.name }}
                </router-link>
                <div class="bottom">
                  <router-link class="numberPart" to="Home">
                    <p class="number">{{ UserStore.following }}</p>
                    <p class="text">关注</p>
                  </router-link>
                  <router-link class="numberPart" to="Home">
                    <p class="number">{{ UserStore.follower }}</p>
                    <p class="text">粉丝</p>
                  </router-link>
                  <router-link class="numberPart" to="Home">
                    <p class="number">{{ UserStore.dynamic_count }}</p>
                    <p class="text">动态</p>
                  </router-link>
                </div>
                <img
                  :src="UserStore.face"
                  class="userHead"
                  @click="
                    $router.push({
                      name: 'Personal',
                      query: { hostMid: UserStore.mid },
                    })
                  "
                />
              </div>
              <!-- 左侧滚动直播UP区域 -->
              <div class="adaptiveScroll">
                <div class="scrollContent">
                  <div class="livePanel">
                    <p class="title">
                      <span class="tcBlack">正在直播</span>
                      <span class="count">（{{ liveInfo.count }}）</span>
                    </p>
                    <div class="moreButton">
                      <a href="javascript:;" class="moreTc">
                        更多
                        <span class="iconfont icon-arrow-right"></span>
                      </a>
                    </div>
                    <!-- 直播up列表开始 -->
                    <div class="liveUpList">
                      <div class="liveUpItem" v-for="item in liveInfo.items" :key="item.uid">
                        <a
                          href="javascript:;"
                          class="liveUpImage"
                          :style="`background-image: url(${item.face});`"
                        ></a>
                        <a href="javascript:;" class="liveDetail">
                          <div class="upName line-clamp-1">{{ item.uname }}</div>
                          <div class="liveName line-clamp-2" :title="item.title">
                            {{ item.title }}
                          </div>
                        </a>
                      </div>
                      <!--                       <div class="liveUpItem">
                        <a href="javascript:;" class="liveUpImage"></a>
                        <a href="javascript:;" class="liveDetail">
                          <div class="upName line-clamp-1">YouTube英语精选</div>
                          <div class="liveName line-clamp-2">用户483301783的直播间</div>
                        </a>
                      </div>
                      <div class="liveUpItem">
                        <a href="javascript:;" class="liveUpImage"></a>
                        <a href="javascript:;" class="liveDetail">
                          <div class="upName line-clamp-1">YouTube英语精选</div>
                          <div class="liveName line-clamp-2">用户483301783的直播间</div>
                        </a>
                      </div> -->
                    </div>
                    <!-- 直播up列表结束 -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 中  -->
        <div class="centerPanel">
          <!-- 话题开始 -->
          <div class="selectionBlock">
            <div class="publishPanel">
              <!-- 新话题 -->
              <div class="newTopic">
                <div class="topicSelector">
                  <span class="iconfont icon-huati"></span>
                  <div class="text">选择话题</div>
                </div>
              </div>
              <!-- 编辑 -->
              <div class="editor">
                <!-- 东西很多 -->
                <div class="editorContainer">
                  <div class="ipt" contenteditable placeholder="有什么想和大家分享的？"></div>
                </div>
              </div>
              <!-- 工具栏 -->
              <div class="toolBar">
                <div class="toolbarBox">
                  <!-- 表情 -->
                  <div class="toolBarItem emojiContainer">
                    <button title="表情" class="boxToggle emojiBtn"></button>
                  </div>
                  <!-- 图片 -->
                  <div class="toolBarItem imgContainer">
                    <button title="上传图片" class="boxToggle imgBtn"></button>
                  </div>
                  <!-- at -->
                  <div class="toolBarItem atContainer">
                    <button class="boxToggle atBtn"></button>
                  </div>
                  <!-- 投票 -->
                  <div class="toolBarItem voteContainer">
                    <button title="发起投票" class="boxToggle voteBtn"></button>
                  </div>
                  <!-- 定时 -->
                  <div class="toolBarItem scheduleContainer">
                    <button title="定时发布" class="boxToggle scheduleBtn"></button>
                  </div>
                  <!-- 直播 -->
                  <div class="toolBarItem liveContainer">
                    <button class="boxToggle liveBtn"></button>
                  </div>
                </div>
                <!-- 发布 -->
                <div class="publishLauncher">
                  <div class="commentSetting">
                    <div class="commentSettingBtn">
                      允许评论
                      <span class="iconfont icon-arrow-down"></span>
                    </div>
                    <div class="settingPanel">
                      <div class="settingOption">允许评论</div>
                      <div class="settingOption">关闭评论</div>
                      <div class="settingOption">评论精选</div>
                    </div>
                  </div>
                  <button class="publishBtn">发布</button>
                </div>
              </div>
            </div>
          </div>
          <!-- cardList开始 -->
          <div class="cardList">
            <!-- up列表 -->
            <div class="viewedPanel">
              <div
                class="iconfont icon-arrow-left"
                @click="handlePrev"
                :style="currentPage === 1 ? 'cursor: not-allowed;' : ''"
              >
              </div>
              <div class="listContainer">
                <!-- 多个up列表 -->

                <div class="listContent" ref="listContent" :style="`width: ${pages * 574 + 'px'};`">
                  <!-- 单个item up -->
                  <div class="viewedItem">
                    <div class="section">
                      <div class="icon">
                        <div class="iconfont icon-fengche"></div>
                      </div>
                    </div>
                    <div class="name active">全部动态</div>
                  </div>
                  <div
                    class="viewedItem"
                    v-for="item in upers"
                    :key="item?.user_profile.info.uid"
                    @click="
                      $router.push({
                        name: 'Personal',
                        query: { hostMid: item?.user_profile.info.uid },
                      })
                    "
                  >
                    <div class="viewedItem">
                      <div class="section">
                        <div
                          class="avatar"
                          :style="`background-image: url(${item?.user_profile.info.face});`"
                        ></div>
                      </div>
                      <div class="name">{{ item?.user_profile.info.uname }}</div>
                    </div>
                  </div>
                  <!-- <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div>
                  <div class="viewedItem">
                    <div class="section">
                      <div class="avatar"></div>
                    </div>
                    <div class="name">帕梅拉PamelaReif</div>
                  </div> -->
                </div>
              </div>
              <div
                class="iconfont icon-arrow-right"
                @click="handleNext"
                :style="currentPage === pages ? 'cursor: not-allowed;' : ''"
              >
              </div>
            </div>
            <!-- tab导航栏和下面的card -->
            <div class="feedCard">
              <div class="tabBar">
                <div class="tab">全部</div>
                <div class="tab active">投稿视频</div>
                <div class="tab">追番追剧</div>
                <div class="tab">专栏</div>
              </div>
              <!-- 主要内容卡片组件card -->
              <div class="content">
                <template v-for="item in dynamic.cards" :key="item.card.aid">
                  <Card :cards="item" />
                </template>
              </div>
            </div>
          </div>
        </div>
        <!-- 右 -->
        <div class="rightPanel">
          <div class="bulletin">
            <p class="text">公告栏</p>
            <router-link class="imgContainer" to="#">
              <div class="noticeImg"></div>
            </router-link>
          </div>
          <!-- 话题 -->
          <div class="topic">
            <div class="scrollContent">
              <div class="topicPanelToatl">
                <div class="topicPanel">
                  <div class="topicPanelNav">
                    <span class="topicTitle">话题</span>
                  </div>
                  <div class="relevantTopic" v-for="item in topic" :key="item.id">
                    <span class="iconfont icon-huati"></span>
                    <div class="relevantTopicTitle">{{ item.name }}</div>
                    <div class="relevantTopicContent">
                      <span>
                        {{ localNum(item.view, 1) }}浏览·{{ localNum(item.discuss, 1) }}讨论
                      </span>
                    </div>
                  </div>
                  <!-- <div class="relevantTopic">
                    <div class="relevantTopicTitle">城市里的动物有哪些？</div>
                    <div class="relevantTopicContent">
                      <span>38.6万浏览·1917讨论</span>
                    </div>
                  </div>
                  <div class="relevantTopic">
                    <span class="iconfont icon-huati"></span>
                    <div class="relevantTopicTitle">城市里的动物有哪些？</div>
                    <div class="relevantTopicContent">
                      <span>38.6万浏览·1917讨论</span>
                    </div>
                  </div>
                  <div class="relevantTopic">
                    <div class="relevantTopicTitle">城市里的动物有哪些？</div>
                    <div class="relevantTopicContent">
                      <span>38.6万浏览·1917讨论</span>
                    </div>
                  </div>
                  <div class="relevantTopic">
                    <div class="relevantTopicTitle">城市里的动物有哪些？</div>
                    <div class="relevantTopicContent">
                      <span>38.6万浏览·1917讨论</span>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 返回顶部的小飞机 -->
      <div class="backTop" @click="goTop"> </div>
    </div>
  </div>
  <!-- <ElButton>trends</ElButton> -->
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    name: 'Trends',
  })
</script>

<script lang="ts" setup>
  // mid=27698706 写死的，到时需要以参数的形式传进来
  import { onMounted, onUnmounted, reactive } from 'vue'
  // import { ElButton } from 'element-plus'
  import Card from './components/Card/Card.vue'
  import { useUserStore } from '@/store/moudles/user'
  import {
    reqVideoDynamic_new,
    reqVideoDynamic_history,
    reqLiveInfo,
    // reqTopic,
    reqDynamicUpers,
  } from '@/api/trends'
  import type { DynamicModel, LiveInfoModle, TopicModel, DynamicUpersModel } from '@/api/trends'
  import { throttle, formatImgUrl, localNum } from '@/utils/lib'
  import { useBackTop, useClearBackTop } from '@/hook/backTop'

  const UserStore = useUserStore()

  //* ---------------处理中间部分动态卡片的请求和渲染------------------------
  const dynamic = reactive<Partial<DynamicModel>>({})
  const isSending = ref(false)

  onMounted(async () => {
    isSending.value = true

    const { history_offset, max_dynamic_id, cards } = await reqVideoDynamic_new(UserStore.mid)
    cards.forEach((item) => (item.card = JSON.parse(item.card as unknown as string)))
    dynamic.cards = cards
    dynamic.next_offset = history_offset
    dynamic.has_more = max_dynamic_id === history_offset ? 0 : 1

    isSending.value = false
  })

  //请求下一页的函数
  async function getMoreDynmic(uid: number, offset_dynamic_id: number) {
    isSending.value = true

    const { next_offset, cards, has_more } = await reqVideoDynamic_history(uid, offset_dynamic_id)
    //这里要注意有坑，新请求回来的cards的第一条会和之前的旧cards的最后一条重复，要清除掉第一条，避免重复
    cards.shift()
    cards.forEach((item) => (item.card = JSON.parse(item.card as unknown as string)))
    dynamic.cards?.push(...cards)
    dynamic.next_offset = next_offset
    dynamic.has_more = has_more

    isSending.value = false
  }

  //创建一个节流函数，用于请求下一页历史记录
  const th_offsetDown = throttle(
    () => {
      //在节流里再加上防抖标识，双重保险，保证400ms触发一次，并且会在上一个请求完毕后才能再请求
      if (isSending.value) return
      if (dynamic.has_more !== 1) return
      const html = document.documentElement
      const offsetDown = html.scrollHeight - html.scrollTop - html.clientHeight
      if (offsetDown < 400) {
        getMoreDynmic(UserStore.mid, dynamic.next_offset!)
      }
    },
    400,
    true,
  )

  onMounted(() => window.addEventListener('scroll', th_offsetDown))

  onUnmounted(() => window.removeEventListener('scroll', th_offsetDown))

  //* ---------------处理左边直播信息卡片的请求和渲染------------------------

  const liveInfo = ref<Partial<LiveInfoModle>>({})

  onMounted(async () => {
    // 这里的图片偶尔会403，需要处理一下
    const res = await reqLiveInfo()
    res.items.forEach((item) => (item.face = formatImgUrl(item.face)))
    liveInfo.value = res
  })

  //* ---------------处理右边话题卡片的请求和渲染------------------------
  //! 这里有问题，和官网的参数一样，但是API ERROR
  const topic = ref<TopicModel[]>([])
  // onMounted(async () => {
  //   const { topic_items } = await reqTopic()
  //   topic.value = topic_items
  // })

  //* -----------------处理中间顶栏动态up主的头像渲染、交互-------------------
  const upers = ref<Partial<DynamicUpersModel[]>>([])
  const pages = ref(1) //总共的页数
  const currentPage = ref(1)
  onMounted(async () => {
    // 这里的图片偶尔会403，需要处理一下
    const { items } = await reqDynamicUpers()
    /* 
      "全部动态"按钮是固定的1个，动态up主的个数是items.length，也就是渲染的头像个数是up主头像个数加"全部动态"按钮1个
      而listContainer宽度固定574px每页能放下8个，pages计算需要多少页，例如17个的话就需要3页，最后一页只有一个
    */
    pages.value = Math.ceil((items.length + 1) / 8)
    items.forEach(
      (item) => (item.user_profile.info.face = formatImgUrl(item.user_profile.info.face)),
    )
    upers.value = items
  })

  const listContent = ref<HTMLDivElement>()

  //使用定位来控制左右翻页，不用父容器的scroll是因为left能直接被css的transition控制过渡效果
  const handleNext = () => {
    if (currentPage.value === pages.value) return
    listContent.value!.style.left = -574 * currentPage.value++ + 'px'
  }

  const handlePrev = () => {
    if (currentPage.value === 1) return
    listContent.value!.style.left = -574 * (--currentPage.value - 1) + 'px'
  }

  //* -------------------返回顶部---------------------------------

  const goTop = () => {
    useBackTop()
  }

  onUnmounted(() => useClearBackTop())

  //* ------------------点击视频前往个人空间----------------
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2977499_2e2oy379s0t.css');
</style>

<style lang="less" scoped>
  .full {
    width: 100%;
    min-width: 1200px;
    margin-top: 62px;

    .container {
      width: 1200px;
      margin: 0 auto;
      margin-top: 8px;
      .fixedBg {
        background-image: url('./imgs/fixedBg.png');
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover;
        background-position: center;
        z-index: -111;
      }
      //主要动态内容
      .homeContainer {
        //总体字体样式开始
        color: #222;
        font-size: 14px;
        //总体字体样式结束
        width: 1160px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        //左
        .leftPanel {
          width: 244px;
          display: flex;
          flex-direction: column;
          position: relative;
          z-index: 1111;
          .userWrapper {
            position: relative;
            width: 244px;
            // height: 188px;
            height: 100%;
            // background-color: #fff;
            .userWrapperLeft {
              height: 100%;

              .content {
                width: 100%;
                height: 188px;
                background-color: #fff;
                // height: 100%;

                .userPic {
                  width: 100%;
                  height: 64px;
                  background: center/cover no-repeat;
                  background-image: url('./imgs/background.webp');
                }
                .userName {
                  display: inline-block;
                  font-size: 13px;
                  letter-spacing: 0;
                  margin-left: 80px;
                  padding-top: 10px;
                  &:hover {
                    color: #00a1d6;
                  }
                }
                .bottom {
                  width: 192px;
                  height: 92px;
                  margin: 0 auto;
                  .numberPart {
                    width: calc(100% / 3);
                    height: 92px;
                    text-align: center;
                    cursor: pointer;
                    outline: none;
                    text-decoration: none;
                    text-align: center;
                    display: inline-block;
                    .number {
                      letter-spacing: 0;
                      padding-top: 35px;
                      font-weight: bold;
                      line-height: 19px;
                      &:hover {
                        color: #00a1d6;
                      }
                    }
                    .text {
                      font-size: 12px;
                      color: #99a2aa;
                      padding-top: 9px;
                      height: 16px;
                    }
                  }
                }
                .userHead {
                  position: absolute;
                  width: 56px;
                  height: 56px;
                  left: 16px;
                  top: 48px;
                  border-radius: 50%;
                  overflow: hidden;
                  cursor: pointer;
                }
              }
              .adaptiveScroll {
                // min-height: 80vh;
                height: 100%;
                // min-height: 0px;
                // position: sticky;
                // top: 0px;
                .scrollContent {
                  position: sticky;
                  top: 0px;
                }
                .livePanel {
                  position: relative;
                  width: 244px;
                  background-color: #fff;
                  border-radius: 4px;
                  margin-top: 8px;
                  // padding-bottom: 12px;
                  display: inline-block;
                  .title {
                    padding-top: 16px;
                    padding-left: 16px;
                    padding-bottom: 2px;
                    font-size: 16px;
                    line-height: 22px;
                    .tcBlack {
                      color: #222;
                      font-size: 16px;
                      line-height: 22px;
                    }
                    .count {
                      color: #99a2aa;
                      letter-spacing: 0;
                      font-size: 14px;
                      line-height: 22px;
                    }
                  }
                  .moreButton {
                    position: absolute;
                    width: 30px;
                    height: 20px;
                    top: 17px;
                    right: 20px;
                    cursor: pointer;
                    .moreTc {
                      font-size: 12px;
                      letter-spacing: 0;
                      color: #99a2aa;
                      outline: none;
                      text-decoration: none;
                      position: relative;
                      .iconfont {
                        position: absolute;
                        display: inline-block;
                        width: 15px;
                        height: 15px;
                        left: 24px;
                        top: -2px;
                      }
                      &:hover {
                        color: #00b5e5;
                      }
                    }
                  }
                  //直播up列表开始
                  .liveUpList {
                    display: inline-block;
                    width: 100%;
                    .liveUpItem {
                      margin-bottom: 20px;
                      position: relative;
                      margin-left: 16px;
                      height: 44px;
                      display: flex;
                      -webkit-box-align: center;
                      align-items: center;
                      justify-content: flex-start;
                      &:first-child {
                        margin-top: 10px;
                      }
                      .liveUpImage {
                        // background-image: url('./imgs/liveUp.webp');
                        display: block;
                        width: 38px;
                        height: 38px;
                        border-radius: 22px;
                        position: relative;
                        margin: 1px;
                        margin-right: 11px;
                        flex-shrink: 0;
                        background-size: cover;
                        background-color: #ddd;
                        box-shadow: 0 0 0 1px #f25d8e;
                        border: 1px solid #fff;
                        outline: none;
                        text-decoration: none;
                      }
                      .liveDetail {
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: keep-all;
                        max-width: 176px;
                        padding-right: 16px;
                        letter-spacing: 0;
                        outline: none;
                        text-decoration: none;
                        cursor: pointer;
                        font-size: 14px;
                        .upName {
                          margin-bottom: 4px;
                          line-height: 20px;
                          word-break: break-word;
                          text-overflow: ellipsis;
                          max-height: 20px;
                        }
                        .line-clamp-1 {
                          display: -webkit-box;
                          -webkit-line-clamp: 1;
                          -webkit-box-orient: vertical;
                          overflow: hidden;
                        }
                        .liveName {
                          font-size: 12px;
                          color: #6d757a;
                          line-height: 16px;
                          word-break: break-word;
                          text-overflow: ellipsis;
                          max-height: 32px;
                        }
                        .line-clamp-2 {
                          display: -webkit-box;
                          -webkit-line-clamp: 1;
                          -webkit-box-orient: vertical;
                          overflow: hidden;
                        }
                      }
                    }
                  }
                  //直播up列表结束
                }
              }
            }
          }
        }
        //中
        .centerPanel {
          width: 632px;
          margin: 0 8px;
          //话题开始
          .selectionBlock {
            margin-bottom: 8px;
            padding: 16px;
            border-radius: 4px;
            background-color: #fff;
            position: relative;
            z-index: 11;
            .publishPanel {
              position: relative;
              width: 100%;
              background-color: #fff;
              padding: 0;
              box-sizing: border-box;
              // 新话题
              .newTopic {
                margin-bottom: 8px;
                .topicSelector {
                  height: 22px;
                  width: 94px;
                  border-radius: 20px;
                  background-color: #f6f7f8;
                  padding: 2px 0 2px 8px;
                  color: #a6aab0;
                  .iconfont {
                    display: inline-block;
                    margin-right: 4px;
                  }
                  .text {
                    display: inline-block;
                  }
                }
              }
              // 编辑
              .editor {
                .editorContainer {
                  position: relative;
                  overflow-y: auto;
                  overflow-x: hidden;
                  .ipt {
                    width: 100%;
                    min-height: 22px;
                    max-height: 300px;
                    letter-spacing: 1px;
                    box-sizing: border-box;
                    white-space: pre-wrap;
                    color: #222;
                    background-color: #fff;
                    font-size: 14px;
                    vertical-align: baseline;
                    outline: none;
                    line-height: 22px;
                    border-radius: 4px;
                    word-break: break-word;
                    word-wrap: break-word;
                  }
                  .ipt:empty::before {
                    content: attr(placeholder);
                    color: #a6aab0;
                  }
                }
              }
              // 工具栏
              .toolBar {
                height: 32px;
                margin-top: 12px;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                // 工具栏
                .toolbarBox {
                  display: flex;
                  flex-direction: row;
                  width: 100%;
                  //工具栏通用样式
                  .toolBarItem {
                    .boxToggle {
                      padding: 0;
                      margin: 0;
                      color: #999;
                      cursor: pointer;
                      background-color: transparent;
                      -webkit-appearance: none;
                      border: 0;
                      outline: none;
                      font-size: 24px !important;
                      // bar公共样式
                      background-size: contain;
                      background-repeat: no-repeat;
                      width: 24px;
                      height: 24px;
                    }
                    // 表情
                    .emojiBtn {
                      margin-left: 0;
                      background-image: url('./imgs/emoji.png');
                    }
                    .imgBtn {
                      margin-left: 20px;
                      background-image: url('./imgs/img.png');
                    }
                    .atBtn {
                      margin-left: 20px;
                      background-image: url('./imgs/@.png');
                    }
                    .voteBtn {
                      margin-left: 20px;
                      background-image: url('./imgs/vote.png');
                    }
                    .scheduleBtn {
                      margin-left: 20px;
                      background-image: url('./imgs/schedule.png');
                    }
                    .liveBtn {
                      margin-left: 20px;
                      background-image: url('./imgs/live.png');
                    }
                  }
                }
                // 发布
                .publishLauncher {
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  .commentSetting {
                    width: 74px;
                    outline: none;
                    .commentSettingBtn {
                      font-size: 12px;
                      color: #99a2aa;
                      letter-spacing: 0;
                      cursor: pointer;
                      user-select: none;
                      .iconfont {
                        font-size: 16px;
                      }
                    }
                    .settingPanel {
                      //控制评论的显示隐藏
                      display: none;
                      position: absolute;
                      z-index: 2;
                      top: 97px;
                      right: 77px;
                      width: 120px;
                      border: 1px solid #e5e9f0;
                      box-shadow: 0 11px 12px 0 rgb(106 115 133 / 30%);
                      border-radius: 4px;
                      flex-direction: column;
                      background-color: #fff;
                      .settingOption {
                        cursor: pointer;
                        height: 36px;
                        padding-left: 12px;
                        line-height: 36px;
                        font-size: 12px;
                        letter-spacing: 0;
                      }
                    }
                  }
                  .publishBtn {
                    width: 70px;
                    height: 32px;
                    outline: none;
                    background-color: #00a1d6;
                    font-size: 13px;
                    line-height: 33px;
                    color: #fff;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
          // up列表和tab导航栏和展示卡片
          .cardList {
            // up列表
            .viewedPanel {
              top: 30px;
              width: calc(100% - 2px);
              min-height: 98px;
              border-radius: 4px;
              background-color: #fff;
              margin-bottom: 8px;
              display: flex;
              align-items: center;
              .iconfont {
                padding: 6px;
                font-size: 20px;
                color: #ccd0d7;
                cursor: pointer;
                width: 28px;
                box-sizing: border-box;
              }
              // up列表
              .listContainer {
                position: relative;
                width: 574px;
                box-sizing: border-box;
                height: 98px;
                overflow: hidden;

                .listContent {
                  position: absolute;
                  left: 0;
                  display: flex;
                  justify-content: flex-start;
                  padding: 13px 0;
                  transition: left 300ms ease-out;

                  // position: relative;
                }
                .viewedItem {
                  position: relative;
                  flex-shrink: 0;
                  width: 62px;
                  margin: 0 5px;
                  cursor: pointer;
                  .section {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 5px;
                    .icon {
                      width: 36px;
                      height: 36px;
                      min-height: 36px;
                      border-radius: 50%;
                      background-color: #b9e9f9;
                      margin: 1px;
                      border: 2px solid #fff;
                      box-shadow: 0 0 0 1px #00a1d6;
                      position: relative;
                      .iconfont {
                        position: absolute;
                        color: #00a1d6;
                        font-size: 35px;
                        font-weight: bold;
                        top: -29%;
                        left: -16%;
                      }
                    }
                    .avatar {
                      // background-image: url('./imgs/up.webp');
                      width: 36px;
                      height: 36px;
                      min-height: 36px;
                      border-radius: 50%;
                      background-size: cover;
                      background-position: center;
                      background-repeat: no-repeat;
                      position: relative;
                      margin: 1px;
                      box-shadow: 0 0 0 1px #fff;
                      border: 2px solid #fff;
                    }
                  }
                  .name {
                    color: #6d757a;
                    letter-spacing: 0;
                    text-align: center;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-word;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 12px;
                    line-height: 16px;
                    &:hover {
                      color: #00a1d6;
                    }
                    &.active {
                      color: #00a1d6;
                    }
                  }
                }
              }
            }
            // tab导航栏和下面的card
            .feedCard {
              width: 100%;
              min-width: 632px;
              box-sizing: border-box;
              .tabBar {
                width: 100%;
                height: 48px;
                background-color: #fff;
                border-radius: 4px;
                margin-bottom: 8px;
                font-size: 14px;
                position: relative;
                color: #99a2aa;
                .tab {
                  display: inline-block;
                  min-width: 56px;
                  height: 48px;
                  line-height: 48px;
                  text-align: center;
                  margin-left: 20px;
                  vertical-align: top;
                  cursor: pointer;
                  &:hover {
                    color: #00a1d6;
                  }
                }
                .active {
                  border-bottom: 2px solid #00a1d6;
                }
              }
              .content {
                width: 100%;
              }
            }
          }
        }

        //右
        .rightPanel {
          width: 268px;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          flex-direction: column;
          .bulletin {
            margin-bottom: 8px;
            position: relative;
            width: 268px;
            background-color: #fff;
            border-radius: 4px;
            .text {
              padding-top: 12px;
              padding-left: 16px;
              padding-bottom: 8px;
              letter-spacing: 0;
            }
            .imgContainer {
              text-align: center;
              display: block;
              padding-bottom: 16px;
              padding-left: 16px;
              padding-right: 16px;
              outline: none;
              text-decoration: none;
              .noticeImg {
                background-image: url('./imgs/bulletin.jpg') !important;
                width: 236px;
                height: 100px;
                border-radius: 4px;
                background: #fff center/cover no-repeat;
                cursor: pointer;
                text-align: center;
              }
            }
          }
          .topic {
            min-height: 429px;
            -webkit-box-flex: 1;
            flex: 1;
            -webkit-box-direction: normal;
            .scrollContent {
              position: sticky;
              top: 10px;
              z-index: 1;
              .topicPanelToatl {
                position: sticky;
                top: 8px;
                border-radius: 8px;
                .topicPanel {
                  background: #fff;
                  border-radius: 4px;
                  font-family: PingFang SC;
                  font-style: normal;
                  padding: 16px 16px 1px;
                  .topicPanelNav {
                    -webkit-box-align: center;
                    align-items: center;
                    display: flex;
                    -webkit-box-pack: justify;
                    justify-content: space-between;
                    margin-bottom: 12px;
                    .topicTitle {
                      color: #222;
                      font-size: 16px;
                      font-weight: 500;
                      line-height: 22px;
                    }
                  }
                  .relevantTopic {
                    margin-bottom: 24px;
                    cursor: pointer;
                    margin-left: 25px;
                    padding-right: 12px;
                    position: relative;
                    .iconfont {
                      display: inline-block;
                      position: absolute;
                      font-size: 24px;
                      color: #008ac5;
                      left: -26px;
                      top: -4px;
                    }
                    .relevantTopicTitle {
                      -webkit-line-clamp: 2;
                      -webkit-box-orient: vertical;
                      color: #18191c;
                      display: -webkit-box;
                      font-size: 14px;
                      line-height: 20px;
                      overflow: hidden;
                      position: relative;
                      text-overflow: ellipsis;
                      &:hover {
                        color: #00a1d6;
                      }
                    }
                    .relevantTopicContent {
                      -webkit-box-align: center;
                      align-items: center;
                      color: #9499a0;
                      display: flex;
                      font-size: 12px;
                      line-height: 17px;
                      margin: 4px 0;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    //小飞机
    .backTop {
      right: 14.75px;
      position: fixed;
      bottom: 50px;
      width: 150px;
      height: 174px;
      cursor: pointer;
      z-index: 998;
      background-position: 0 0;
      text-align: center;
      background-image: url('./imgs/plane.png');
      background-repeat: no-repeat;
    }
  }
</style>
